<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;  charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3获取后台数据示例</title>
	<!-- 添加Bootstrap样式库以美化表格 -->
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue3 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.27/vue.global.prod.js"></script>
    <!-- 引入Axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>    
</head>
<body>
    <div id="app">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>电话号码</th>
                    <th>注册时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{ user.id}}</td>
                    <td>{{ user.name}}</td>
                    <td>{{ user.sex }}</td>
                    <td>{{ user.telephone }}</td>
                    <td>{{ user.registerTime }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 创建Vue应用实例并定义根组件
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    users: []
                };
            },
            async mounted() {
                try {
                    const response = await axios.get('http://127.0.0.1:8080/sec');
                    this.users = response.data;
                } catch (error) {
                    console.error("Error fetching users:", error);
                }
            }
        });

        // 挂载Vue应用
        app.mount('#app');		
    </script>
</body>
</html>
